<p style="margin-bottom: 0px">&nbsp;</p>
<nz-spin [nzSpinning]="loading">
<div class="wrapper" *ngIf="nodata">
  <div class="">
    <div class="text-center mv-lg">
      <h1 class="mb-lg">
        <i class="anticon anticon-shopping-cart" style="font-size:7rem; color: #909fa7"></i>
      </h1>
      <div style="font-size:1.2rem; font-weight: 700!important;color: #6c777d;margin-bottom: 15px">Your Shopping Cart is empty.</div>
      <p class="lead m0">
        <button style="margin-right: 5px;" nz-button nzGhost nzType="primary" [routerLink]="['/order/products']">
          <i class="anticon anticon-arrow-left"></i>Continue shopping
        </button>

        <nz-upload [nzAction]="importExcelUrl" [nzShowUploadList]="false" nzAccept="application/vnd.ms-excel" (nzChange)="batchImport($event)">
          <button nz-button nzGhost nzType="primary">
            <i class="anticon anticon-to-top"></i>Batch import
          </button>
        </nz-upload>
        <button style=" margin-left: 5px; " nz-button nzGhost nzType="primary" down-file [http-data]="data" http-url="assets/tmp/cartimport.xls" file-name="Cart template">
          <i class="anticon anticon-download"></i>Download template
        </button>
      </p>
    </div>
  </div>
</div>

<div *ngIf="!nodata" nz-row nzGutter="16">
  <div nz-col nzSpan="18">
      <ng-container *ngFor="let order of list">
          <ng-template #infoTemplate>
              <span class="mr-lg">Total Price: <strong>{{currency | CurrencyType}}{{order.price}}</strong></span>
              <span>(<strong>{{order.qty}}</strong>) items</span>
          </ng-template>
          <ng-template #editAction>
            <button style="margin-left: 30px;" nz-button nzType="default" [routerLink]="['/order/products']">
                <i class="anticon anticon-arrow-left"></i>Continue shopping
              </button>

              <button (click)="removeHead()" nz-button nzType="default" style="float: right;margin-right: 30px;">
                Cancel
              </button>
              <button nz-button nzType="primary" style="float: right; " (click)="sumbitCart()">
                <i class="anticon anticon-upload"></i>Submit Order
              </button>
          </ng-template>
          <nz-card [id]="order.brand" nzTitle="{{order.brand | brandEnPipe | uppercase}}" [nzExtra]="infoTemplate" [nzActions]="[editAction]">
            <nz-list
              [nzDataSource]="order.detail"
              [nzItemLayout]="'horizontal'"
              [nzRenderItem]="item">
              <ng-template #item let-item>
                <nz-list-item [nzContent]="nzContent" [nzActions]="[editAction]">
                  <ng-template #editAction><a (click)="remove(item, order)"><i class="anticon anticon-delete"></i></a></ng-template>
                  <ng-template #nzContent>
                    <table>
                      <td style="width: 68px;"><span class="mr-md" style="line-height: 32px;">{{currency | CurrencyType}}{{item.price}} <small>U/P</small></span></td>
                      <td><nz-input-number style="width: 64px;" [(ngModel)]="item.qty" [nzStep]="1" [nzMin]="0" (ngModelChange)="qtyChange(item, order, $event)"></nz-input-number></td>
                      <td>
                        <h3 class="ml-md mr-md" style="color: #ff6969;line-height: 32px;">
                          {{currency | CurrencyType}}{{item.price * item.qty}}
                        </h3>
                      </td>
                    </table>
                  </ng-template>
                  <nz-list-item-meta
                      [nzTitle]="nzTitle"
                      [nzAvatar]="nzAvatar"
                      [nzDescription]="nzDescription">
                      <ng-template #nzAvatar>
                          <div  class="cart-product-imitation">
                              <img *ngIf="item.img" style="max-width:135px;height: 100%" src="{{(imgSuffix + item.img)}}">
                              <img *ngIf="!item.img" style="max-width:135px" src="{{defaultUrl}}">
                          </div>
                      </ng-template>
                      <ng-template #nzTitle>
                          <a href="javascript:void(0)" class="display-3">{{item.productCd}}</a>
                          <small style="margin-left: 10px;">
                            <nz-tag [nzColor]="'red'" *ngIf="item.isCm === '1'">Rx</nz-tag>
                            <nz-tag [nzColor]="'gold'" *ngIf="item.isAd === '1'">Ad</nz-tag>
                            <nz-tag [nzColor]="'blue'">{{item.brand | brandEnPipe | uppercase}}</nz-tag>
                          </small>
                      </ng-template>
                      <ng-template #nzDescription>
                          <span class="mr-md text-right text-sm">Frame Color: {{item.colorSpec}}</span>
                          <span class="mr-md text-right text-sm">Frame material: {{item.pfTexture}}</span>
                          <span *ngIf="item.brand.indexOf('光学') < 0" class="mr-md text-right text-sm">Lens material: {{item.lensTexture}}</span>
                      </ng-template>
                  </nz-list-item-meta>
                </nz-list-item>
              </ng-template>
            </nz-list>
          </nz-card>
      </ng-container>
  </div>
  <div nz-col nzSpan="6">
      <nz-affix [nzOffsetTop]="120">
        <nz-card [nzTitle]="'Cart Summary'">
            <span>
                Total Price
            </span>
            <h2 class="font-bold">
                {{currency | CurrencyType}}{{totalPrice}}
            </h2>
            <nz-divider></nz-divider>
            <span>
                Total Qty
            </span>
            <h2 class="font-bold">
                {{total}}
            </h2>
            <nz-divider></nz-divider>
            <button style="margin-bottom: 12px; margin-left: auto" nz-button nzType="primary" nzBlock (click)="sumbitCart()">
              <i class="anticon anticon-upload"></i>Submit Order
            </button>
            <button style="margin-bottom: 12px; margin-left: auto" nz-button nzType="default" nzBlock (click)="removeHead()">Cancel</button>
            <button style="margin-bottom: 12px; margin-left: auto" nz-button nzType="default" nzBlock
                [routerLink]="['/order/products']">
                <i class="anticon anticon-arrow-left"></i>Continue shopping
            </button>
            <nz-upload [nzAction]="importExcelUrl" [nzShowUploadList]="false" nzAccept="application/vnd.ms-excel" (nzChange)="batchImport($event)" >
              <button style="margin-bottom: 12px; margin-left: auto" nz-button nzType="default" >
                <i class="anticon anticon-to-top"></i>Batch import
              </button>
            </nz-upload>
            <button style=" margin-left: 10px; " nz-button nzType="default" down-file [http-data]="data" http-url="assets/tmp/cartimport.xls" file-name="Cart template">
              <i class="anticon anticon-download"></i>Download template
            </button>
        </nz-card>
      </nz-affix>
  </div>
</div>
</nz-spin>
